<template>
  <el-card shadow="hover">
    <template #header>
      <span>交易额近7日趋势图</span>
    </template>
    <vab-chart
      style="height: 287px; width: 100%"
      :init-options="initOptions"
      :option="option"
      theme="vab-echarts-theme"
    />
  </el-card>
</template>

<script>
import VabChart from '@/extra/VabChart'
import { BarChartData } from '@/api/index/supplier'

export default {
  name: 'VabChartBar',
  components: {
    VabChart,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      initOptions: {
        renderer: 'svg',
      },

      option: {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
            },
          },
        },
        legend: {
          data: ['交易额'],
          itemGap: 5,
          top: -5,
          left: 250,
        },
        grid: {
          top: 20,
          right: 20,
          bottom: 40,
          left: 40,
        },
        xAxis: {
          type: 'category',
          data: [
            '第一天',
            '第二天',
            '第三天',
            '第四天',
            '第五天',
            '第六天',
            '第七天',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: {
          name: '交易额',
          data: [],
          type: 'bar',
        },
      },
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.trrigerBarChartData()
    this.timer = setInterval(() => {
      this.trrigerBarChartData()
    }, 10000)
  },
  methods: {
    async trrigerBarChartData() {
      const res = await BarChartData()
      this.option.series.data = res.data
      let ary = this.option.series.data
      const dataChange = ary.map((item) => item / 100)
      this.option.series.data = dataChange
    },
  },
}
</script>
